<template>
  <div>
    <!-- <router-link to="/home/my/a"> <MyIndex1> </MyIndex1> </router-link> -->

    <MyIndex1> </MyIndex1>
    <div class="openVIP">
      <span>开通vip专享超值权益</span> <button @click="goVIP">立刻开通</button>
    </div>

    <!-- <van-grid :column-num="3">
      <van-grid-item
        v-for="value in 6"
        :key="value"
        icon="photo-o"
        text="文字"
      />
    </van-grid> -->
    <div class="alwaysuse">
      <p>常用工具</p>
      <van-grid :icon-size="100" :column-num="3">
        <van-grid-item
          v-for="(item, index) in listArr"
          :key="index"
          icon="photo-o"
          :text="item.text"
          :to="item.path"
        />
      </van-grid>
    </div>

    <!-- <div>向右 <van-icon name="arrow" @click="goDrafts" /></div> -->
    <!-- 遮罩层 -->
    <!-- 
    <div>
      <van-cell @click="showPopup">展示弹出层</van-cell>
      <van-popup
        v-model="show"
        position="right"
        :style="{ height: '100%', width: '100%' }"
      >
        <van-icon name="arrow-left" @click="showPopup" />
        <span>草稿箱</span> -->
    <!-- <van-cell title="我的消息(不写)" is-link to="/home/my/mymessage" /> -->
    <!-- <Title title="我的消息" /> -->
    <!-- 
        <Drafts />
      </van-popup>
    </div> -->

    <!-- <Title title='asd'/> -->

    <div class="van_cell">
      <van-cell
        class="van_cell"
        title="我的消息(不写)"
        is-link
        to="/home/my/mymessage"
      />
      <van-cell class="van_cell" title="我的设置" is-link to="/my/set" />
      <van-cell
        class="van_cell"
        title="计时设置"
        is-link
        to="/home/my/timeset"
      />
      <van-cell
        class="van_cell"
        title="意见与反馈"
        is-link
        to="/home/my/opinion"
      />
    </div>
    <!-- <MyIndex2 /> -->
    <!-- <router-view> </router-view> -->
  </div>
</template>

<script>
import Title from "../../components/my/Title";
import Drafts from "../../components/my/Drafts";
import MyIndex1 from "../../components/my/MyIndex1";
import MyIndex2 from "../../components/my/MyIndex2";
import A from "../../components/my/A";
export default {
  data() {
    return {
      // 遮罩层
      // show: false,

      listArr: [
        { text: "我的发布", path: "/home/my/Publish" },
        { text: "我的收藏", path: "/home/my/collect" },
        { text: "我的练习", path: "/home/self" },
        { text: "目标日", path: "/home/self" },
        { text: "个性装扮", path: "/home/self" },
        { text: "草稿箱", path: "/home/my/drafts" },
      ],
    };
  },
  methods: {
    goDrafts() {
      this.$router.push("/home/my/drafts");
    },

    // 调到vip界面
    goVIP() {
      this.$router.push("/my/vip");
    },
    // 遮罩层
    // showPopup() {
    //   this.show = !this.show;
    // },
  },
  components: {
    MyIndex1,
    MyIndex2,
    A,
    Title,
    Drafts,
  },
};
</script>

<style lang="scss" scoped>
.openVIP {
  width: 644px;
  height: 82px;
  margin: 0 52px;
  /* text-align: center; */
  border: 1px solid #999;
  // margin-top: 32x;
  border-radius: 10px;
  font-size: 28px;
  line-height: 60px;
  position: relative;
  span {
    height: 82px;
    line-height: 82px;
    margin-left: 10px;
  }
  button {
    width: 160px;
    height: 60px;
    margin-top: 14px;
    margin-left: 466px;
    margin-right: 10px;
    text-align: center;
    position: absolute;
    right: 10px;
    // top: 18px;
  }
}
.alwaysuse {
  font-size: 28px;

  p {
    font-size: 28px;
    margin-top: 42px;
    margin-left: 52px;
  }
  .vangrid {
    font-size: 28px;
    .van-grid-item__text {
      font-size: 28px;
    }
  }
}
.van_cell {
  width: 574px;
  font-size: 28px;
  margin-left: 26px;
  margin-right: 26px;
  margin-top: 40px;
}
</style>
